<template>
    <div id="mylightspot">
        <div class="mylightspot-top">
            <div class="mylightspot-mylightspot">
                <img src="https://static.zhihu.com/heifetz/assets/title_highlighted_rights.1f9f07ba.png" alt="">
            </div>
        </div>


        <div class="mylightspot-b">
            <ul>
                <li>
                    <img src="https://static.zhihu.com/heifetz/assets/icon_medal_traffic.b245b6cc.png" alt="">
                    <h2>专属流量激励</h2>
                    <p>新手流量扶持</p>
                    <p>每周/月权益礼包</p>
                </li>
                 <li>
                    <img src="https://static.zhihu.com/heifetz/assets/icon_medal_commercial.bba651fc.png" alt="">
                    <h2>多种商业化途径</h2>
                    <p>沉淀品牌价值</p>
                    <p>提升营销转化</p>
                </li>
                 <li>
                    <img src="https://static.zhihu.com/heifetz/assets/icon_medal_operation.4369b0ca.png" alt="">
                    <h2>高效运营工具</h2>
                    <p>基于擅长话题</p>
                    <p>推荐高影响力热点问题</p>
                </li>
                 <li>
                    <img src="https://static.zhihu.com/heifetz/assets/icon_medal_certify.4627a4ef.png" alt="">
                    <h2>官方认证</h2>
                    <p>专有身份标识</p>
                    <p>迅速获得知友认可</p>
                </li>
            </ul>

        </div>
    </div>
</template>

<script>
export default {
    name: 'mylightspot',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#mylightspot{
    width: 100%;
    height: 440px;
    .mylightspot-top{
        width: 1000px;
        height: 64px;
        text-align: center;
        margin: 40px auto;
        img{
            width:178px ;
            height: 64px;
        }
    }
    .mylightspot-b{
        width: 1000px;
        height:300px ;
        margin: 0 auto;
        ul{
            width: 1000px;
            height:300px ;
            list-style: none;
            display: flex;
            justify-content: space-between;
            li{
                width: 200px;
                height: 300px;
                background-color: #0066FF;
                border-radius: 15px;
                position: relative;
                color: #fff;
                text-align: center;
                padding-top: 160px;
                box-sizing: border-box;
                h2{
                    font-size: 28px;
                    font-weight: 0;
                    margin-bottom: 10px;
                }
                
                img{
                    width: 140px;
                    height: 140px;
                    position: absolute;
                    top: -50px;
                    left: 30px;
                }
            }
        }
    }
}

</style>
